---
import BaseHead from '../components/BaseHead.astro';
import BaseLayout from '../components/BaseLayout.astro';
import { format as formatDate, parseISO } from 'date-fns';

const { content } = Astro.props;
---

<!doctype html>
<html>

<head>
  <style lang="scss">
    @use '../../public/styles/var' as *;

    .hero {
      background: linear-gradient(45deg, $rainbow-green, $rainbow-blue, $rainbow-purple);
      color: white;
      border-bottom: 1px solid #555;
      padding: 3rem;

      &-inner {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 3rem;
        background: rgba(white, 0.2);
      }

      a {
        color: white;
        text-decoration: underline;
      }
    }

    .title {
      font-weight: 900;
      font-size: 4em;
      line-height: 1.4;
      margin: 0;
    }

    .tagline {
      margin: 1rem 0;
      font-weight: 400;
      font-size: 1.25em;
    }

    .meta {
      font-size: 1em;
    }

    .wrapper {
      margin-left: auto;
      margin-right: auto;
      max-width: 55em;
    }
  </style>
  <BaseHead title={content.title} description={content.description} permalink="TODO" />
</head>

<body>
  <BaseLayout>
    <header class="hero">
      <div class="hero-inner">
        <svg height="80px" style="padding-left: 8px;" viewBox="0 0 640 512" version="1.1" xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink">
          <g stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd">
            <g transform="translate(-1.000000, 0.000000)" fill-rule="nonzero"><path d="M635.92,462.7 L347.92,14.7 C342.03,5.54 331.89,0 321,0 C310.11,0 299.97,5.54 294.08,14.7 L6.08,462.7 C-0.250773249,472.547007 -0.699487627,485.064987 4.91,495.34 C10.522069,505.612419 21.2945349,512 33,512 L609,512 C620.71,512 631.48,505.61 637.09,495.33 C642.699457,485.058495 642.250708,472.543372 635.92,462.7 Z M321,91.18 L406.39,224 L321,224 L257,288 L218.94,249.94 L321,91.18 Z"></path></g>
          </g>
        </svg>
        <h1 class="title">{content.title}</h1>

        <h2 class="tagline">
          {content.tagline && <div style="margin-bottom: 1rem;">{content.tagline}</div>}
          <small class="meta">
            Published <a href='#published-at'>{formatDate(parseISO(content.date), 'MMMM d, yyyy')}</a>
            by <a href="https://twitter.com/FredKSchott">Fred K. Schott</a>
          </small>
        </h2>

        <!-- Place this tag where you want the button to render. -->
        <div class="hidden-mobile" style="text-align: center; margin-top: 0.5rem; filter: scale(2);">
          <a class="github-button" href="https://github.com/FredKSchott/snowpack" data-icon="octicon-star" data-size="large"
            data-show-count="true" aria-label="Star FredKSchott/snowpack on GitHub">Star</a>
        </div>
        <!-- Place this tag in your head or just before your close body tag. -->
        <script defer src="https://buttons.github.io/buttons.js"></script>
      </div>
    </header>

    <main class="wrapper wrapper__readable pt6 pb6">
      <article class="content markdown-body">
        <slot></slot>
      </article>
    </main>
  </BaseLayout>
</body>

</html>
